require(["jquery"],function($){
	$(function() {
	    function UEList(el, config) {
	        let defalut = {
	            imgList: null,
	            fieldKey: "id",
	            data: [],
	            dataType: {}
	        };
	        this.el = el;
	        this.config = $.extend(defalut, config);

	    };

	    function title(o){
	    	return o["title"] ? '<span class="fieldTitle">' + o["title"] + "</span>" : "";
	    }

		function unit(o){
			return o["unit"] ? "<span class='fieldUnit '>" + o.unit + "</span>" : "";
		} 

		var fieldType = {
			text : function(t){
				return "<span class='filedText text'>#" + t + "#</span>";
			},
			img : function (t){
				return "<img class='filedText img' src='#t#'";
			}
		}   
	    
		function updateAttr(n,o,e){
			if(!n["title"] && o["title"]){
				e.find(".fieldTitle").remove();
			}else if(n["title"] && !o["title"]){
				e.find(".filedText").before(title(n));
			}else{
				e.find(".fieldTitle").html(n["title"]);
			}

			if(!n["unit"] && o["unit"]){
				e.find(".fieldTitle").remove();
			}else if(n["unit"] && !o["unit"]){
				e.find(".filedText").append(unit(n));
			}else{
				e.find(".fieldUnit").html(n["unit"]);
			}
		}
	    UEList.prototype = {
	        init: function() {
	            this.el.append(this.fillData(this.setTemplate()));
	        },

	        setTemplate: function() {
	            var dataType = this.config.dataType,
	                temp = ["<section class='dataBox'  data-id = '#fieldKey#'>"];
	            for (var t in dataType) {
	                var o = dataType[t];
	                temp.push("<div field-type='"+o.type+"' data-field = '" + t + "' class='dataItem'>");
	                temp.push(title(o));
	                temp.push(fieldType[o.type](t));
	                temp.push(unit(o));
	                temp.push("</div>");
	            }

	            return temp.join("") + "</section>";
	        },

	        getTemplate : function(){
	        	var clone = this.el.find(".dataBox:first").clone();
	        	clone.attr("data-id","#fieldKey#");
	        	clone.find(">[data-field]").each(function(){
	        		$(this).find(".filedText").html("#"+$(this).attr("data-field")+"#")
	        	});

	        	return clone[0].outerHTML;
	        },

	        refresh : function(dataType){
	        	var oldType = this.config.dataType;
	        		this.config.dataType = dataType;
	        	var	newTemp = $(this.setTemplate()),
	        		oldTemp = $(this.getTemplate());

	        	for(var d in dataType){
	        		var o = dataType[d], t = o["type"],$item = oldTemp.find(">[data-field='"+d+"']");
	        		if(!(oldType[d] && oldType[d]["type"] == dataType[d]["type"])){
	        			if(!oldType[d]){
	        				oldTemp.append("<div field-type='"+t+"' data-field = '" + d + "' class='dataItem'>"+(title(o)+fieldType[t](d)+unit(o))+"</div>");
	        			}else{
	        				$item.attr("field-type",t).find(".filedText").replace($(fieldType[t](d)));
	        				updateAttr(o,oldType[d],$item);
	        			}
	        		}else{
	        			updateAttr(o,oldType[d],$item);
	        		}
	        	}

	        	for(var d in oldType){
	        		if(!dataType[d]){
	        			oldTemp.find(">[data-field='"+d+"']").remove();
	        		}
	        	}

	        	this.el.html(this.fillData(oldTemp[0].outerHTML));

	        },

	        fillData: function(template) {
	            var data = this.config.data,
	                s = [];
	            for (var i = 0; i < data.length; i++) {
	                var item = data[i],
	                    q = template.replace("#fieldKey#", item[this.config.fieldKey]);
	                for (var t in item) {
	                    q = q.replace("#" + t + "#", item[t]);
	                }
	                s.push(q);
	            }

	            return s.join('');
	        }
	    };

	    $.fn.UEList = function(config) {
	        var list = $(this).data("ueList");
	        if (!list) {
	            list = new UEList($(this), config);
	            $(this).data("ueList", list);
	            list.init();
	        }

	        return list;
	    }

	});
});